import React, { useState } from "react";
import { View, StyleSheet, Dimensions, Text, StatusBar } from "react-native";
import { Button } from "@rneui/themed";
import shajs from "sha.js"
import { useSelector } from "react-redux";
import Loading from "@/components/LoadingModal";
import NavBar from '@/components/NavBar'
import LockScreenSet from '@/components/LockScreenSet'
import { walletStandardProps } from '@/config/navigatorProps'
import { setObjectValue } from '@/utils/deviceStorage'
import api from "@/request/api";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const CreateReview = (props) => {

    const [lockVisible, setLockVisible] = useState(false)
    const [loadingVisible, setLoadingVisible] = useState(false)
    const mnemonicStr = useSelector((state) => state.singleSignReducer.mnemonicStr);

    const handlePressDone = () => {
        setLoadingVisible(true)
        if (mnemonicStr) {
            var skdt = shajs('sha256').update(mnemonicStr).digest('hex')
            api.words_register(skdt).then(res => {
                setLoadingVisible(false)
                setObjectValue("token", res.token)
                setLockVisible(true)
            }).catch(() => {
                setLoadingVisible(false)
            })
        }
    }

    const navigatToNext = () => {
        props.navigation.navigate('main')
    }

    return (
        <View style={styles.container}>
            <StatusBar backgroundColor='#5A72EC' barStyle='light-content' />
            <NavBar {...props} {...walletStandardProps} />
            <View style={styles.bodyContent}>
                <Text style={styles.title1}>Last step! Let's review it quickly!</Text>
                <View style={styles.divider}></View>
                <Text style={{ ...styles.title2, marginTop: 12 * ratio }}>
                    I know that if I lose mnemonics, I won't be able to recover my wallet
                </Text>
                <Text style={{ ...styles.title2, marginTop: 23 * ratio }}>
                    I know that if I lose this device or uninstall the app, my wallet can only be recovered through mnemonics
                </Text>
                <Text style={{ ...styles.title2, marginTop: 23 * ratio }}>
                    I know that mnemonics are kept by the user personally, and the wallet cannot help recover after being lost
                </Text>
                <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                    <Button buttonStyle={{ ...styles.button }} onPress={handlePressDone}>
                        <Text style={styles.title3}>Confirm and Complete</Text>
                    </Button>
                </View>
            </View>
            {lockVisible && <CommonContext.Provider value={{ modalVisible: lockVisible, setModalVisible: setLockVisible, isReset: false, navigatToNext, isCreate: true, mnemonicStr }}>
                <LockScreenSet />
            </CommonContext.Provider>}
            {loadingVisible && <Loading visible={loadingVisible} />}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F6F6F9'
    },
    bodyContent: {
        flex: 1,
        alignItems: 'center'
    },
    title1: {
        fontSize: 16,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#262626',
        lineHeight: 21,
        marginTop: 13 * ratio
    },
    title2: {
        width: 288 * ratio,
        fontSize: 16,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#4C6BC9',
        lineHeight: 21
    },
    title3: {
        fontSize: 17,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FFFFFF',
        lineHeight: 22
    },
    divider: {
        width: 288 * ratio,
        height: 1,
        opacity: 0.7,
        borderWidth: 1,
        borderColor: '#151515',
        marginTop: 18 * ratio
    },
    button: {
        width: 304 * ratio,
        height: 56 * ratio,
        backgroundColor: '#5A72EC',
        borderRadius: 28,
        marginBottom: 83 * ratio
    }
})
export default CreateReview